import React, {Component} from 'react'
import {Card, Button, Table, Modal} from 'antd'
import {PAGE_SIZE} from "../../utils/constants";
import {reqRoles} from '../../api'
import AddForm from "./add-from";
import  AuthForm from  './auth-form'
/**
 * 路由角色
 */
export default class Role extends Component {

    state = {
        //所有角色的列表
        roles: [],
        //选中的role
        role: {},
        //是否显示添加界面
        showStatus: false,
        //是否显示设置权限界面
        isShowAuth: false,
    }

    initColumn = () => {
        this.columns = [
            {
                title: '角色名称',
                dataIndex: 'name'
            },
            {
                title: '创建时间',
                dataIndex: 'createTime'
            },
            {
                title: '授权时间',
                dataIndex: 'authTime'
            },
            {
                title: '授权人',
                dataIndex: 'authName'
            },
        ]
    }

    onRow = (role) => {
        return {
            onClick: event => {
                console.log('row Onclik()', role)
                this.setState({
                    role
                })
            }
        }
    }

    addRoles = () => {
        //收集输入数据
        this.form.validateFields((error, values) => {
            if (!error) {
                const {roleName} = values
                console.log(roleName)
            }
        })
        //添加请求
        this.setState({
            showStatus: false
        })
        //根据结果提示更新列表显示
    }

    updateRoles= ()=>{
        const role = this.state.role
        //得到最新的menu
        console.log('this.auth.current.getMenus()')
        console.log(this.auth.current.getMenus())
        this.auth.current.getMenus()

    }

    componentWillMount() {
        this.initColumn()
    }

    getRoles = async () => {
        const result = await reqRoles()
        if (result.code === 200) {
            const roles = result.data.records
            this.setState({
                roles
            })
        }
    }

    constructor (props) {
        super(props)

        this.auth = React.createRef()
    }


    componentDidMount() {
        this.getRoles()
    }

    render() {
        const {roles, role, showStatus,isShowAuth} = this.state
        const title = (
            <span>
                <Button type='primary' onClick={() => this.setState({
                    showStatus: true
                })}>创建角色</Button>&nbsp;&nbsp;&nbsp;&nbsp;
                <Button type='primary' onClick={() => this.setState({
                    isShowAuth: true
                })}>设置角色权限</Button>
            </span>
        )


        return (
            <Card title={title}>
                <Table
                    bordered
                    rowKey='id'
                    dataSource={roles}
                    columns={this.columns}
                    pagination={{
                        defaultPageSize: PAGE_SIZE,
                        showQuickJumper: true
                    }}
                    rowSelection={{type: 'radio', selectedRowKeys: [role.id]}}
                    onRow={this.onRow}
                />
                <Modal
                    title="添加角色"
                    visible={showStatus}
                    onOk={this.addRoles}
                    onCancel={() => {
                        this.setState({
                            showStatus: false
                        })
                    }}
                >
                    <AddForm
                        setForm={(form) => {
                            this.form = form
                        }}
                    >

                    </AddForm>

                </Modal>
                <Modal
                    title="设置角色的权限"
                    visible={isShowAuth}
                    onOk={this.updateRoles}
                    onCancel={() => {
                        this.setState({
                            isShowAuth: false
                        })
                    }}
                >
                    <AuthForm
                        ref ={this.auth}
                        role={role}
                    >
                    </AuthForm>
                </Modal>
            </Card>
        )
    }
}